﻿<template>
  <BaseDialog
    v-model="visible"
    :title="title"
    :width="width"
    :show-footer="true"
    :cancel-text="cancelText"
    :confirm-text="confirmText"
    @cancel="emit('cancel')"
    @confirm="handleConfirm"
  >
    <div class="sticky-header">您当前有 {{ normalized.length }} 个品牌，请选择要进入的品牌：</div>

    <div class="brand-list">
      <div v-for="item in normalized" :key="item.id" class="brand-item" @click="select(item.id)">
        <div class="brand-left">
          <img :src="item.logo" class="brand-logo" />
          <span>{{ item.name }}</span>
        </div>

        <div class="radio" :class="{ checked: selectedId === item.id }">
          <span class="dot" v-if="selectedId === item.id"></span>
        </div>
      </div>
    </div>
  </BaseDialog>
</template>

<script setup>
  /**
   * 复用说明
   * - props.list: 接口返回的候选数组，支持两种结构：
   *   1) { customer:{ id, customerName, customerLogo, tenantId }, sign, ... }
   *   2) { id, customerName, customerLogo, ... }
   * - v-model: 控制弹窗显隐
   * - v-model:selectedId: 当前选中的 id（字符串）
   * - @confirm: 点击确认时把“原始命中的对象 raw”回传给父组件
   * - @cancel: 点击取消
   */
  const props = defineProps({
    modelValue: { type: Boolean, default: false },
    list: { type: Array, default: () => [] },
    selectedId: { type: String, default: "" },

    title: { type: String, default: "选择品牌" },
    width: { type: String, default: "404px" },
    confirmText: { type: String, default: "确认" },
    cancelText: { type: String, default: "取消" },
  });

  const emit = defineEmits(["update:modelValue", "update:selectedId", "confirm", "cancel"]);

  const visible = computed({
    get: () => props.modelValue,
    set: v => emit("update:modelValue", v),
  });

  // 统一归一化，便于渲染
  const normalized = computed(() =>
    (props.list || []).map(raw => ({
      id: String(raw?.customer?.id ?? raw?.id ?? ""),
      name: raw?.customer?.customerName ?? raw?.customerName ?? raw?.name ?? "",
      logo: raw?.customer?.customerLogo ?? raw?.customerLogo ?? "",
      raw,
    }))
  );

  function select(id) {
    emit("update:selectedId", id);
  }

  function handleConfirm() {
    const hit = normalized.value.find(e => e.id === props.selectedId);
    if (!hit) return;
    emit("confirm", hit.raw);
  }
</script>

<style scoped lang="scss">
  .sticky-header {
    position: sticky;
    top: 0;
    padding-bottom: 16px;
    font-weight: 500;
    font-size: 14px;
    z-index: 10;
  }
  .brand-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .brand-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--cb1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    .brand-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .brand-logo {
      width: 40px;
      height: 40px;
      border-radius: 8px;
    }
    .radio {
      width: 14px;
      height: 14px;
      border: 2px solid var(--cb1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.2s;
      &.checked {
        border: 4px solid var(--bd);
      }
      .dot {
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 50%;
      }
    }
  }
</style>
